# Introduction

The `Tooltip` component is used to describe icon buttons.
In some cases tooltips are used to show more content, this should
be used cautiously since it is [hard to be completely accessible](https://inclusive-components.design/tooltips-toggletips/).

## Tooltip with IconButton

Each `IconButton` should always be wrapped in a `Tooltip`.

```jsx
<Tooltip content="Edit title">
  <IconButton icon={EditIcon} />
</Tooltip>
```

## Tooltip to show some content

Use with caution, it’s [hard to be completely accessible](https://inclusive-components.design/tooltips-toggletips/).

```jsx
<Tooltip content="Learn more about a feature">
  <InfoSignIcon />
</Tooltip>
```

## Tooltip with card appearance

Use with caution, it’s [hard to be completely accessible](https://inclusive-components.design/tooltips-toggletips/).

```jsx
<Tooltip content={<Paragraph margin={40}>Card appearance</Paragraph>} appearance="card">
  <InfoSignIcon />
</Tooltip>
```

## Positioning the Tooltip

The `Tooltip` can be positioned on the following positions using the `position` prop:

- `Position.TOP`
- `Position.TOP_LEFT`
- `Position.TOP_RIGHT`
- `Position.BOTTOM`
- `Position.BOTTOM_LEFT`
- `Position.BOTTOM_RIGHT`
- `Position.LEFT`
- `Position.RIGHT`

For a `Tooltip` the only really useful sides are `TOP`, `RIGHT`, `BOTTOM` and `LEFT` as shown below.

```jsx
<Pane display="flex" justifyContent="space-between">
  <Tooltip content="Top" position={Position.TOP}>
    <IconButton icon={ArrowUpIcon} />
  </Tooltip>
  <Tooltip content="Right" position={Position.RIGHT}>
    <IconButton icon={ArrowRightIcon} />
  </Tooltip>
  <Tooltip content="Bottom" position={Position.BOTTOM}>
    <IconButton icon={ArrowDownIcon} />
  </Tooltip>
  <Tooltip content="Left" position={Position.LEFT}>
    <IconButton icon={ArrowLeftIcon} />
  </Tooltip>
</Pane>
```

## Conditionally show Tooltip

In some cases you may want to only show a `Tooltip` when a certain condition is true. You can accomplish this by
manually hiding the `Tooltip` with the `isShown` prop when it should never be shown, and leaving the component uncontrolled
when you want it to display on hover (standard behavior).

```jsx
function ConditionalTooltipExample() {
  const [showTooltipOnHover, setShowTooltipOnHover] = React.useState(false)
  const handleToggle = React.useCallback(
    () => setShowTooltipOnHover((prevShowTooltipOnHover) => !prevShowTooltipOnHover),
    []
  )
  return (
    <React.Fragment>
      <Checkbox
        checked={showTooltipOnHover}
        label="Show Tooltip on hover"
        marginBottom={majorScale(2)}
        onChange={handleToggle}
      />
      <Tooltip
        /* Setting isShown to undefined retains standard Tooltip behavior (shows on hover)
           Setting isShown to false ensures the Tooltip is never shown on hover */
        isShown={showTooltipOnHover ? undefined : false}
        content="This Tooltip is showing because the Checkbox is enabled."
      >
        <Button>Close</Button>
      </Tooltip>
    </React.Fragment>
  )
}
```
